<template>
	<view class="performance_statistical">
		<xbd-pages-content title="统计报表">
		<template #content>
			<view class="content" :style="'minHeight:'+windowHeight+'px'">
				<!-- 时间选择 -->
				<view class="date">
					<xbd-date-picker fields="day" :date="date" :visible.sync="visible" @setDate="setDateChange">
						<template>
							<view class="uni-input" @click="visible = true">
								<text>{{ date }}</text>
								<image class="down" src="../../static/down.png" mode=""></image>
							</view>
						</template>
					</xbd-date-picker>
				</view>
				<view class="score">
					<view class="scoreBox">
						<view class="today" style="margin-top: 20rpx; margin-bottom: 60rpx;">
							<text style="font-size: 28rpx; margin-right: 40rpx">个人日得分</text>
							<text style="font-size: 40rpx; color: #5473E8;">{{averageScore}}</text>
						</view>
						<view class="today">
							<text style="font-size: 28rpx;margin-right: 40rpx ">部门日得分</text>
							<text style="font-size: 40rpx; color: #5473E8;">{{averageScoreD}}</text>
						</view>
					</view>
					<view class="chart2">
						<chart-ring :chartData="ringChart"></chart-ring>
					</view>
				</view>
				
				<!-- 近半年工作指标申请统计 -->
				<xbd-title title="近半年工作指标申请统计"></xbd-title>
				<view class="title">
					<view class="">
						<view class="">
							<text style="margin-right: 40rpx">系统指标</text>
							<text style="color:#5E98E7; font-size: 40rpx;">{{count.systemCount}}</text>
						</view>
					</view>
					<view class="box">
						<view class="">
							<text style="margin-right: 40rpx">偶发性指标</text>
							<text style="font-size: 40rpx; color: #39D4D1;">{{count.incidental}}</text>
						</view>
					</view>
				</view>
				<view class="chart">
					<chart-health-twoLine :chartData="weigthChart"></chart-health-twoLine>
				</view>
				
			</view>
		</template>
		</xbd-pages-content>
	</view>
</template>

<script>
	import { Performance } from '@/api/index.js';
	export default {
		data() {
			const currentDate = this.getDate({
			           format: true
			       })
			return {
				windowHeight:0,
				visible:false,
				date:currentDate,
				averageScore:1,
				averageScoreD:1,
				count:{},
				ringChart: [{
					  x: '1',
					  y: 0
				}],
				weigthChart: {
					name: ['系统','偶发'],
					unit: ['个','个'],
					color: ['#457AFF','#39d4d1'],
					x: 'x',
					y: ['y', 'series'],
					data: []
				},
			};
		},
		methods: {
			setDateChange(date){
				this.date = date;
				this.init()
			},
			getDate(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    let day = date.getDate();
			
			    if (type === 'start') {
			        year = year - 60;
			    } else if (type === 'end') {
			        year = year + 2;
			    }
				if (day === 1){
					var preDate = new Date(date.getTime() - 24*60*60*1000)
					day = preDate.getDate()
					month = month - 1
				}
				if (month === 0){
					year = year - 1
					month = 12
				}
				month = month > 9 ? month : '0' + month ;
				day = (day-1) > 9 ? day-1 : '0' + (day-1);
			    return `${year}-${month}-${day}`;
			},
			
			
			async init() {
				try {
					const res = await Performance.getStatistical(this.date);
					console.log(res,'init')
					uni.hideLoading();
					this.averageScore = res.data.data.averageScore
					this.averageScoreD = res.data.data.averageScoreD
						
						// console.log('this.averageScore',res.data.data.averageScore)
						// console.log('this.averageScoreD',res.data.data.averageScoreD)
						// console.log(res.data.data.averageScoreD,'res.data.data.averageScoreD')
					if(res.data.data.averageScoreD === 0){
						this.ringChart[0].y  = 0
					}else{
						this.ringChart[0].y = Math.round(this.averageScore/this.averageScoreD*100)
						console.log(this.ringChart[0].y,'this.ringChart[0].y')
						console.log(this.ringChart,'this.ringChart')
					}
				} catch (e) {
					uni.hideLoading();
					console.log(e);
				}
			},
			async initChart() {
				try {
					const res = await Performance.getPerformanceTrend();
					console.log(res,'initChart')
					uni.hideLoading();
					this.count = res.data.count
					this.weigthChart.data = res.data.trend
				} catch (e) {
					uni.hideLoading();
					console.log(e);
				}
			},
		},
		computed: {
		    startDate() {
		        return this.getDate('start');
		    },
		    endDate() {
		        return this.getDate('end');
		    }
		},
		async onLoad(){
			 await this.init()
			 await this.initChart()
			uni.getSystemInfo({
				     success:(res) =>{
						 this.windowHeight = res.windowHeight
				         console.log(this.windowHeight);
				     }
				 });
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 20px 50rpx;
		background-color: #FFFFFF;
		.date{
			color: #000000;
			.uni-input{
				display: flex;
				align-items: center;
			}
			.down{
				margin-left: 20rpx;
				width: 28rpx;
				height: 28rpx;
				vertical-align: sub;
			}
		}
		
		.title{
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 50rpx 80rpx;
		}
		.score{
			display: flex;
			// height: 280rpx;
			align-items: center;
			box-sizing: border-box;
			.scoreBox{
				flex: 1;
				padding-left:30rpx;
				box-sizing: border-box;
			}
			.chart2{
				width: 360rpx;
				height: 360rpx;
			}
		}
		.chart {
			height: 200px;
			box-sizing: border-box;
			margin-left:-40rpx;
		}
	}

</style>
